<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            margin-top: 20px;
        }

        td,
        th {
            border: 1px solid;
            padding: 3px;
        }
    </style>
</head>

<body>
    <div>
        <label for="">课程名称:</label>
        <input type="text">
        <label for="">所属方向:</label>
        <select>
            <option value="frontend">前端</option>
            <option value="java">java</option>
            <option value="ui">ui 设计</option>
        </select>
        <input type="button" value="添加课程">
    </div>

    <table>
        <thead>
            <tr>
                <th>课程名称</th>
                <th>班级</th>
                <th>完成情况</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

    <script>
        const data = [
            { id: 1, subject: 'HTML', department: 'frontend' },
            { id: 2, subject: 'javaOO', department: 'java' },
            { id: 3, subject: 'CSS', department: 'frontend' },
            { id: 4, subject: 'javascript', department: 'frontend' },
            { id: 5, subject: 'photoshop', department: 'ui' },
        ];

        function render() {
            let str = _.chain(data)
                .map(function (item) {
                    let text = '';
                    switch (item.department) {
                        case 'frontend': text = '前端'; break;
                        case 'java': text = 'java'; break;
                        case 'ui': text = 'UI'; break;
                    }
                    return `
                <tr>
                    <td>${item.subject}</td>    
                    <td>${text}</td>    
                    <td><a href='javascript:;' data-id=${item.id}>删除</a></td>    
                </tr>
            `
                })
                .join('')
                .value();
            $('tbody').html(str);
        }
        render()

        // 新增课程
        $('[type="button"]').click(function () {
            let subject = $('[type="text"]').val(); // 输入框的值
            if (subject) { // 输入框有字
                let department = $('select').val(); // 下拉框的值
                data.push({
                    id: data[data.length - 1].id + 1,
                    subject,
                    department
                });
                render()
                $('[type="text"]').val('');
            }
        });

        // 删除
        $('tbody').click(function (event) {
            let id = event.target.dataset.id;
            let obj = _.find(data, function (o) { return o.id == id });
            let result = confirm(`是否删除${obj.subject}`);
            if (result) {
                var evens = _.remove(data, function (n) {
                    return n.id == id;
                });
                render();
            }
        });
    </script>
</body>

</html>